<template>
  <div class="ele-body">
    <el-steps :active="active" simple>
      <el-step title="基本信息" icon="el-icon-location-information"> </el-step>
      <el-step title="SQL" icon="el-icon-coin"></el-step>
      <el-step title="权限" icon="el-icon-lock"></el-step>
      <el-step title="插件" icon="el-icon-setting"></el-step>
    </el-steps>
    <div class="content-page">
      <!-- 第一步 信息页 -->
      <info
        ref="info"
        v-show="active == 0"
        :value="form"
        :isUpdate="isUpdate"
        @changeMode="changeMode"
      />
      <!-- 第二步 sql模式页 -->
      <sql
        ref="sql"
        :datasourceId="form.ds"
        v-show="active == 1 "
        :value="form"
        :consts="consts"
      />

      <auth
          ref="auth"
          v-show="active == 2"
          :value="form"
      />

      <!-- 第四步 插件页 -->
      <plugin   ref="plugin" v-show="active == 3" :value="form" />
    </div>
    <div class="foot-btn">
      <el-button @click="prevStep" v-if="active > 0" :disabled="saveBtnLoading">上一步</el-button>
      <el-button type="primary" @click="initSql" :loading="initLoading" v-if="active == 1">保存</el-button>
      <el-button type="primary" @click="nextStep" v-if="active < 3">下一步</el-button>
      <el-button type="primary" @click="save" :loading="saveBtnLoading" v-if="active == 3">完成</el-button>
    </div>
  </div>
</template>

<script>
import Info from './components/info.vue';
import Sql from './components/sql.vue';
import Auth from './components/auth.vue';
import Plugin from './components/plugin.vue';
import { encode } from 'js-base64';

import { deepClone } from "@smallwei/avue";
import curdMixin from '@/framework-core/mixins/crud';
import {listCore, saveCore} from "@framework-core/api/core/api";

export default {
  name: 'apiManage',
  components: { Info, Sql,Auth, Plugin },
  mixins: [curdMixin],
  data() {
    return {
      active: 0,
      form: {},
      saveBtnLoading: false,
      initLoading: false,
      consts: [],
      dataPermissionColums: []
    };
  },
  created() {

  },
  methods: {
    prevStep() {
      if (this.active > 0 && this.active <= 3) {
        this.active--;
      }
    },
    nextStep() {
      switch (this.active) {
        case 0:
          this.$refs.info.validate((form) => {
            this.form = Object.assign(this.form, {}, form);
            this.form.check = false;
            this.save(true);
          });
          this.$nextTick(() => {
            //手动刷新codemirror视图 TODO
           // this.$refs.sql.$refs.editor.refresh();
           // this.active++;
          });
          break;
        case 1:
          this.$refs.sql.validate((form) => {
            this.form = Object.assign(this.form, {}, form);
            this.form.check = true;
            this.save(true);

          });
          this.dataPermissionColums = this.form.aliasAll || this.form.alias;
          break;
        default:

          break;
      }
    },
    save(change) {
      this.$refs.plugin.validate((form) => {
        this.form = Object.assign(this.form, {}, form);

      });

      let form = deepClone(this.form);
      form.sqlText = encode(form.sqlText);
      this.saveBtnLoading = true;
      saveCore("/apis/apisConfig",form,{}).then(() => {
        this.$message.success("保存成功");
        this.saveBtnLoading = false;
        if(change){
          this.active++;
        }
        if( this.active === 1){
          setTimeout(() => {
            this.$refs.sql.initialize(this.form);
          }, 200)
        }
      }).catch((errorMsg) => {
        this.$message.success(errorMsg);
        this.saveBtnLoading = false;
      });

    },
    changeMode() {
      this.$refs.simple.clearValidate();
      this.$refs.sql.clearValidate();
    },
    clearValidate() {
      this.$refs.info.clearValidate();
      this.$refs.sql.clearValidate();
      this.$refs.simple.clearValidate();
      this.$refs.auth.clearValidate();
      this.active = 0;
      this.form = {};
    },
    initSql() {
      this.$refs.sql.validate((form) => {
        this.form = Object.assign(this.form, {}, form);
        this.form.check = true;
        this.save(false);
      });
    },
    getConsts() {

    }
  },

  watch: {
    data: {
      handler(val) {
        if (val && Object.keys(val).length) {
          if (val.alias && typeof val.alias === 'string')
            val.alias = JSON.parse(val.alias);
          this.form = val;
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.getConsts();
  }
};
</script>
<style lang="scss" scoped>
.content-page {
  padding: 20px 0;
}
.foot-btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
